<template>
    <div class="login-container flex-box center" style="height:100vh">
      <div class="mmodal-box-cont marTop">
      <div class="mmodal-box">
              <div @click="loginType=!loginType">
                  {{loginType?'登录':'注册'}}
              </div>
              <div>
                  <div class="data-row">
                      <div>账号</div>
                      <div><input type="text" v-model="user" class="login-data" value="test000"></div>
                  </div>
                  <div class="data-row">
                      <div>密码</div>
                      <div><input type="password" v-model="password" class="login-data" value="Aaaa@1111"></div>
                  </div>
              </div>
              <div>
                  <div @click="loginSub" class="mfoot-btn btn-regis marTop" v-if="loginType">登录</div>
                  <div @click="registerSub" class="mfoot-btn btn-regis marTop" v-else>注册</div>
              </div>
              <div>&nbsp;</div>
          </div>
        </div>
    </div>
  </template>
  
  <script>
  
  const title = process.env.NUXT_APP_WEB_TITLE
  export default {
    name: 'LoginPage',
    layout: 'login',
    components: {
  
    },
    data() {
      return {
        title,
        user:'',
        password:'',
        loginType:1
       
      }
    },
    computed: {
  
    },
    methods: {
        async loginSub(){
            let {user,password:pwd}  =this
            console.log("redirectUrl",this.$axios)
            let  usePwdRes =  await this.$axios.post("/reg?user="+user+"&password="+pwd)
            
            this.$store.dispatch('setLoginFn','12312sdsd')
             let redirectUrl = this.$route.query.redirect||'/'
            console.log("redirectUrl",this.$route.query,redirectUrl,usePwdRes)
            usePwdRes&&setTimeout(() => {
                this.$router.replace(redirectUrl)
            }, 200);
          
        },
        registerSubSub(){
          this.loginType = 1
            // this.$utils.setToken('12312sdsd')
        },
    }
  }
  </script>
  <style type="text/css">
       @import url('static/css/style.css');
      @import url('static/css/game.css');
      @import url('static/css/index.css');
  
      @import url('static/css/menu.css');
       @import url('static/css/frame.css');

       .mmodal-box-cont{
            /* display: none; */
            /* position: fixed; */
            top:20%;
            left: 5%;
            width: 90%;
            z-index: 999;
        }
        .mmodal-box{
            width: 100%;
            color: #ffffff;
            background: var(--coloraa);
            box-shadow: 1px 8px 6px #00000042;
        }
        .mmodal-box > div:first-child{
            height: 85px;
            padding: 15px;
            font-size: 1.8rem;
            font-weight: bold;
            text-decoration: underline;
        }
        .mmodal-box > div:nth-child(2){
            width: 100%;
        }
        .mmodal-box > div:nth-child(3){
            margin-top: 130px;
            margin-bottom: 120px;
        }
        .mmodal-box > div:nth-child(3) > div:first-child{
            margin-left: auto;
            margin-right: auto;
        }
        .data-row{
            display: flex;
            height: 40px;
            justify-content: space-evenly;
            align-items: center;
            font-size: 1.6rem;

        }
        .login-data{
            width: 200px;
            height: 30px;

        }
  
  </style>
  